import React, {useState} from 'react';
import {Alert, Image, Linking, Modal, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import {getImgUrl} from "../../../utils/ComFunction";

const ZhuanYinItemView = ({item, onPress, isShowBuyNum = true, title, image, buyNum, authenCode, address, category, categoryArray = [], city = ''}) => {
    return (
        <TouchableOpacity activeOpacity={0.7} onPress={onPress}>
            <View style={styles.listItem}>
                <View style={styles.imageBox}>
                    {image ? (
                        <Image
                            style={styles.storeImg}
                            source={{
                                uri: getImgUrl(image),
                            }}
                        />
                    ) : (
                        <Image
                            style={styles.storeImg}
                            source={require('source/image/comm/sc_default.png')}
                        />
                    )}
                </View>
                <View style={styles.storeInfoBox}>
                    <Text numberOfLines={1} style={styles.storeTitle}>{city ? city + ' · ' : ''}{title || ''}</Text>
                    <View style={styles.buyerInfo}>
                        <View style={styles.storeTag}>
                            {
                                // 分类标签：当有分类数组时显示数组内容，否则显示category或'无'
                                categoryArray.length > 0 ? (
                                    <View style={styles.storeCat}>
                                        <Text style={styles.storeTagText}>
                                            {categoryArray.map(item => item.title).join(', ')}
                                        </Text>
                                    </View>
                                ) : category ? (
                                    <View style={styles.storeCat}>
                                        <Text style={styles.storeTagText}>{category}</Text>
                                    </View>
                                ) : null
                            }

                            {
                                // 专营标签：只有当有分类信息时才显示
                                (categoryArray.length > 0 || category) ? (
                                    <View style={styles.storeZY}>
                                        <Text style={styles.storeTagText}>专营</Text>
                                    </View>
                                ) : null
                            }

                            {
                                // 认证标签：当有认证码时显示
                                authenCode ? (
                                    <View style={styles.storeRZ}>
                                        <Text style={styles.storeTagText}>帅车认证</Text>
                                    </View>
                                ) : null
                            }

                        </View>
                        {isShowBuyNum && (
                            <View style={styles.buyerNumBox}>
                                <Text style={styles.buyerNum}>{buyNum || 0}个买手</Text>
                                <Image
                                    style={styles.rImg}
                                    source={require('source/image/comm/arrow_gray_icon.png')}
                                />
                            </View>
                        )}

                    </View>
                    <View style={styles.storeAddressBox}>
                        <Image
                            style={styles.storeAddressImg}
                            source={require('source/image/location_gray.png')}
                        />
                        <Text numberOfLines={1} style={styles.storeAddressText}>{address || ''}</Text>
                    </View>
                </View>
            </View>
        </TouchableOpacity>
    );
};

const styles = StyleSheet.create({
    listItem: {
        backgroundColor: '#ffffff',
        flexDirection: 'row',
        borderRadius: 5,
        height: 100,
        alignItems: 'center',
    },
    imageBox: {
        flexDirection: 'row',
        padding: 10,
    },
    storeImg: {
        width: 95,
        height: 72,
        borderRadius: 5,
    },
    storeInfoBox: {
        flex: 1,
        paddingVertical: 10,
    },
    storeTitle: {
        fontSize: 16,
        fontWeight: 'bold',
        color: '#101010'
    },
    buyerInfo: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginTop: 7,
    },
    storeTag: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    storeCat: {
        backgroundColor: '#257DF1',
        color: '#fff',
        fontSize: 10,
        height: 20,
        alignItems: 'center',
        borderTopLeftRadius: 2,
        borderBottomLeftRadius: 2,
        paddingHorizontal: 5,  // 添加水平内边距
    },
    storeZY: {
        backgroundColor: '#FF7B00',
        color: '#fff',
        fontSize: 10,
        height: 20,
        width: 30,
        alignItems: 'center',
        borderTopRightRadius: 2,
        borderBottomRightRadius: 2,
    },
    storeRZ: {
        backgroundColor: '#ffcd00',
        color: '#fff',
        fontSize: 10,
        height: 20,
        width: 50,
        alignItems: 'center',
        borderRadius: 2,
        marginLeft: 5,
    },
    storeTagText: {
        color: '#fff',
        fontSize: 10,
        lineHeight: 20,
    },
    buyerNumBox: {
        flexDirection: 'row',
        alignItems: 'center',
        width: 80,
        justifyContent: 'flex-end',
    },
    buyerNum: {
        color: '#333333',
        fontSize: 12
    },
    rImg: {
        width: 18,
        height: 18,
        marginRight: 5
    },
    storeAddressBox: {
        flexDirection: 'row',
        alignItems: 'center',
        marginTop: 7,
    },
    storeAddressImg: {
        width: 16,
        height: 16
    },
    storeAddressText: {
        color: '#999999',
        fontSize: 12,
        marginLeft: 5,
        flex: 1
    }

});

export default ZhuanYinItemView;